<template>
  <div>
    <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" />

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="name"
        :columns="columns"
        @cancel="showPicker = false"
        :loading="loading"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  created() {
    this.onLoad(0);
  },
  data() {
    return {
      station: "",
      showPicker: false,
      columns: [{}, {}, {}],
      loading: false
    };
  },
  methods: {
    onLoad(index) {
      if (index > 2) {
        return;
      }

      this.loading = true;
      setTimeout(() => {
        (this.columns[index].values = [
          { name: "beij" },
          { name: "beij" },
          { name: "beij" }
        ]),
          (this.loading = false);
      }, 2000);
    },
    onChange(picker, values, index) {
      this.onLoad(index + 1);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>